<template>
  <div class="authority-container">
    <div style="text-align: start">
      <a-button @click="add">新建科室</a-button>
    </div>
    <a-table
      :loading="loading"
      :columns="columns"
      :data-source="dataSource"
      rowKey="id"
      :pagination="false"
      style="height: 700px; margin-top: 20px; overflow: hidden"
    >
      <div slot="action" slot-scope="text, record">
        <a @click="edit(record)" style="margin-right: 8px"> 编辑 </a>
        <a-divider type="vertical" />
        <a @click="authority(record)" style="margin-right: 8px"> 管理权限 </a>
        <a-divider type="vertical" />
        <a @click="setMember(record)" style="margin-right: 8px"> 设置成员 </a>
        <a-divider type="vertical" />
        <a-popconfirm
          title="确定删除吗?"
          @confirm="deleteRole(record)"
          ok-text="删除"
          cancel-text="取消"
        >
          <a style="margin-right: 8px"> 删除 </a>
        </a-popconfirm>
      </div>
    </a-table>
    <div class="pagination">
      <a-pagination
        :defaultPageSize="pagination.pageSize"
        :current="pagination.current"
        show-quick-jumper
        :total="pagination.total"
        show-less-items
        @change="onPageChange"
      />
    </div>
    <a-modal
      title="编辑权限"
      :visible="treeVisible"
      :destroyOnClose="true"
      @ok="treeHandleOk"
      @cancel="treeHandleCancel"
      :width="800"
    >
      <a-tree
        v-if="treeData && treeData.length > 0"
        :tree-data="treeData"
        checkable
        v-model="checkedKeys"
        @check="onCheck"
        :checkStrictly="true"
      >
      </a-tree>
    </a-modal>

    <a-modal
      :confirm-loading="confirmLoading"
      :title="title"
      :visible="visible"
      :destroyOnClose="true"
      @ok="handleOk"
      @cancel="handleCancel"
      :width="800"
    >
      <a-form :form="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">
        <a-form-item label="科室名">
          <a-input
            placeholder="请输入科室名"
            v-decorator="[
              'name',
              {
                rules: [{ required: true, message: '请输入科室名!' }],
                initialValue: form.name,
              },
            ]"
          />
        </a-form-item>
      </a-form>
    </a-modal>
    <include-members-component
      v-if="memberVisible"
      :visible="memberVisible"
      :cancel="memberHandleCancel"
      :roleId="editId"
    >
    </include-members-component>
  </div>
</template>

<script>
import {
  getRoleList,
  AddRole,
  editRole,
  deleteRole,
  getRolePermission,
  setRolePermission,
} from '@/api/role';
import includeMembersComponent from '@/components/includeMembersComponent';
const columns = [
  {
    title: '科室名称',
    dataIndex: 'name',
    align: 'center',
  },
  {
    title: '创建人',
    dataIndex: 'creator',
    align: 'center',
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' },
    align: 'center',
  },
];
export default {
  name: 'authority',
  components: { includeMembersComponent },
  data() {
    return {
      form: this.$form.createForm(this, {
        name: undefined,
      }),
      loading: true,
      dataSource: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      parames: {},
      columns,
      title: '新建用户',
      visible: false,
      editId: '',
      confirmLoading: false,
      type: 'add',
      treeData: [],
      treeVisible: false,
      checkedKeys: [],
      memberVisible: false,
    };
  },
  created() {
    this.getData();
  },
  computed: {},
  methods: {
    getData() {
      this.loading = true;
      let request = { ...this.parames };
      request.currentPage = this.pagination.current;
      request.pageSize = this.pagination.pageSize;
      getRoleList(request).then((response) => {
        console.log(response);
        this.dataSource = response.data.list;
        this.pagination.total = response.data.count;
        this.loading = false;
      });
    },
    onPageChange(page, pageSize) {
      this.pagination.current = page;
      this.pagination.pageSize = pageSize;
      this.getData();
    },
    edit(record) {
      console.log(record);
      this.type = 'edit';
      this.title = '编辑科室';
      this.editId = record.id;
      this.form.name = record.name;
      this.visible = true;
    },
    add() {
      this.type = 'add';
      this.title = '新建科室';
      this.visible = true;
    },
    handleCancel() {
      this.initForm();
      this.visible = false;
    },
    handleOk(e) {
      e.preventDefault();
      const { type } = this;
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true;
          let request = { ...values, id: this.editId };
          console.log(request);
          if (type === 'add') {
            AddRole(request).then((response) => {
              console.log(response);
              if (response.code == 200) {
                this.$message.success(response.message);
                this.getData();
                this.visible = false;
              } else {
                this.$message.error(response.message);
              }
              this.confirmLoading = false;
              this.initForm();
            });
          } else {
            editRole(request).then((response) => {
              console.log(response);
              if (response.code == 200) {
                this.$message.success(response.message);
                this.getData();
                this.visible = false;
              } else {
                this.$message.error(response.message);
              }
              this.confirmLoading = false;
              this.initForm();
            });
          }
        }
      });
    },
    initForm() {
      Object.keys(this.form.getFieldsValue()).forEach((key) => {
        this.form[key] = undefined;
      });
    },
    deleteRole(record) {
      deleteRole({ id: record.id }).then((response) => {
        if (response.code == 200) {
          this.getData();
          this.$message.success('删除成功');
        } else {
          this.$message.error(response.message);
        }
      });
    },
    authority(record) {
      console.log(record);
      this.editId = record.id;
      getRolePermission().then((res) => {
        console.log(res);
        this.treeData = res.data;
      });
      this.treeVisible = true;
    },
    clearChildren(items) {
      for (let i = 0; i < items.length; i++) {
        const item = items[i];
        if (item && item['children']) {
          delete item['children'];
        }
      }
      return items;
    },
    treeHandleOk() {
      setRolePermission({ id: this.editId, key: this.checkedKeys }).then(
        (response) => {
          if (response.code == 200) {
            this.$message.success(response.message);
            this.treeVisible = false;
          } else {
            this.$message.error(response.message);
          }
          this.checkedKeys = [];
        }
      );
    },
    treeHandleCancel() {
      this.checkedKeys = [];
      this.treeVisible = false;
    },
    onCheck(checkedKeys, e) {
      this.checkedKeys = [...checkedKeys.checked];
      console.log(this.checkedKeys);
    },
    memberHandleOk() {},
    memberHandleCancel() {
      this.memberVisible = false;
    },
    setMember(record) {
      this.editId = record.id;
      this.memberVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.authority-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  .pagination {
    height: 30px;
    line-height: 30px;
    width: 100%;
    text-align: right;
  }
}
</style>
